<template>
  <el-table
    :data="get_menuList"
    style="width: 100%; margin-bottom: 20px"
    row-key="id"
    border
    default-expand-all
  >
    <el-table-column prop="id" label="菜单编号"  />
    <el-table-column prop="title" label="菜单名称"  />
    <el-table-column prop="pid" label="上级菜单" />
    <el-table-column label="图标">
      <template v-slot="item">
        <el-icon>
          <component :is="item.row.icon" v-if="item.row.icon"></component>
        </el-icon>
      </template>
    </el-table-column>
    <el-table-column prop="url" label="菜单地址" />
    <el-table-column label="状态">
      <template v-slot="item">
        <el-button type="primary" plain v-if="item.row.status==1">启用</el-button>
        <el-button type="danger" plain v-else>禁用</el-button>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template v-slot="item">
        <el-button type="primary" @click="editItem(item.row.id)">编辑</el-button>
        <el-button type="danger" @click="delItem(item.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { onMounted, ref, computed,defineEmits } from "vue";
import {useStore} from 'vuex'
import {menudelete} from '@/request/api'
const emit = defineEmits(['edit'])
const $store = useStore()
onMounted(()=>{
  action_menuList()
})
const get_menuList = computed(()=>{
  return $store.state.menu.menuList
})
const action_menuList = ()=>{
  $store.dispatch('menu/action_menuList')
}
// 编辑
const editItem = (id)=>{
  emit('edit',id)
}
// 删除
const delItem = (id)=>{
  ElMessageBox.confirm(
    '此操作将永久删除该菜单，是否继续？',
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      try{
        let res = await menudelete({id})
        if(res.code == 200){
          ElMessage({
            type: 'success',
            message: res.msg,
          })
          action_menuList()
        }else{
          ElMessage({
            type: 'warning',
            message: res.msg,
          })
        }
      }catch(err){
        ElMessage({
            type: 'error',
            message: err,
        })
      }
      
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

</script>

<style>
</style>